<template>
  <div class="blog-header-com">
    <div class="header-left">
      <img src="../assets/logo.jpg" />
      <span>小木匠</span>
    </div>
    <div class="header-right">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">创作中心</el-menu-item>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">登录</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style scoped>
.blog-header-com {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
}
.header-left img {
  width: 50px;
  vertical-align: middle; /*图文混排居中*/
}
.header-left span {
  font-weight: bold;
  font-size: 22px;
  position: relative;
  top: 7px;
}
.header-left {
  width: 30%;
}
</style>
